<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    max-height="600"
    title="品牌部交付"
    width="40%"
    :close-on-click-modal="false"
  >
    <Form ref="ruleFormRef" label-width="120px" :model="createData" :rules="rules">
    <FormItem label="工单名称" prop="order_name">
      <Input v-model="createData.order_name" disabled></Input>
    </FormItem>
    <FormItem label="上传附件" prop="order_file" validate-position="top-start">
      <FileUpload
        ref="uploadRef"
        :limit="1"
        :auto-upload="false"
        :action="'/'"
        :file-list="createData.order_file"
        @change="handleChange"
        @remove="handleRemove"
      >
        <Button type="primary">点击上传</Button>
      </FileUpload>
    </FormItem>
    <FormItem label="备注" prop="brand_work_remark">
      <Input type="textarea" v-model="createData.brand_work_remark"></Input>
    </FormItem>
    <FormItem label="通知运营人员">
      <Checkbox v-model="createData.notice"></Checkbox>
    </FormItem>
    </Form>
    <template #footer>
      <Button type="primary" @click="submitClick"> 确定 </Button>
      <Button type="primary" @click="boxVisibility = false"> 取消 </Button>
    </template>
  </DialogBox>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Button, DialogBox, Form, FormItem, Input, Modal, FileUpload, Checkbox } from '@opentiny/vue'
import { getRetouchOrder } from '@/request/api'
const  props = defineProps({
  basicGridRef: Object
})
const boxVisibility = ref(false)
const createData = ref({
  order_name: '',
  order_file: [],
  brand_work_remark: '',
  notice: true
})
const ruleFormRef = ref()
const curRow = ref({})
const rules = ref(
  {
    order_name: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    order_file: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    brand_work_remark: [
      { required: true, message: '必填', trigger: 'change' },
    ]
  }
)
const open = (row) => {
  curRow.value = row
  boxVisibility.value = true
  createData.value.order_name = row.order_name
}

const handleRemove = () => {
  createData.value.order_file = []
}

const handleChange = (file, fileLlist) => {
  if (['zip','rar'].some(item => file.name.endsWith(item))) {
    createData.value.order_file = fileLlist
  } else {
    uploadRef.value.clearFiles()
    Modal.alert({ message: '只支持zip/rar为后缀的压缩包', title: '错误提示', status: 'error' })
  }
}
const submitClick = () => {
  ruleFormRef.value.validate(val => {
    if (val) {
      const formData = new FormData()
      formData.append('flag', 2)
      formData.append('order_id', curRow.value.order_id)
      formData.append('brand_work', createData.value.order_file[0]?.raw)
      formData.append('brand_work_remark',  createData.value.brand_work_remark)
      formData.append('notice',  Number(createData.value.notice))
      getRetouchOrder(formData, 'put').then(res => {
        if (res?.data?.ret === 0) {
          props.basicGridRef.handleFetch()
          boxVisibility.value = false
        } else {
          Modal.message({ message: res.data.msg, status: 'error' })
        }
      })
    }
})
}
defineExpose({
  open
})
</script>